chrome.devtools.panels.create(
    'DevToolKit',
    'icon48.png',
    'panel.html',
    function(extensionPanel) {
    var _window; // Going to hold the reference to panel.html's `window`

    var data = [];
    var port = chrome.runtime.connect({name: 'devtools'});

    // 监听background发送过来的消息，调用panel的回调函数
    port.onMessage.addListener(function(msg) {
        // Write information to the panel, if exists.
        // If we don't have a panel reference (yet), queue the data.

        if(_window){
            _window.cbf_received_msg_from_background(msg);
        }else{
            // 如果panel没有加载成功， 先将信息存放到队列
            data.push(msg);
        }
    });

    // 初始哈panel， 注册回调函数
    extensionPanel.onShown.addListener(function tmp(panelWindow) {
        extensionPanel.onShown.removeListener(tmp); // Run once only
        _window = panelWindow;

        // 释放队列的信息
        var msg;
        while (msg = data.shift()) {
            if(msg.todo == "xpath"){
                _window.cbf_received_msg_from_background(msg);
            }
        }
            
        // Just to show that it's easy to talk to pass a message back:
        _window.respond = function(msg) {
            port.postMessage(msg);
        };


        // 一般使用的消息传送函数
        _window.cbf_msg_send_to_background = function(msg){
            console.log("devtool: cbf_msg_send_to_background");
            console.log(msg);
            port.postMessage(msg);
        }

    });
});